<template>
  <div>
    <div>
      <label>
        登录名
        <!-- 模板语法，类似于JSP的EL表达式 -->
        {{user.loginName}}
      </label>
    </div>
    <div>
      <label>
        姓名
        <!-- v-model是Vue.js的双向绑定功能，它能够自动绑定表单输入框和对象的属性 -->
        <input v-model="user.name" />
      </label>
    </div>
    <div>
      <label>
        手机号码
        <input v-model="user.mobilePhone" />
      </label>
    </div>
    <div>
      <label>
        邮箱地址
        <input v-model="user.email" />
      </label>
    </div>
    <div>
      <!--@是语法糖，本质上就是v-on:-->
      <button @click="save">保存</button>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import "@/assets/fonts/icomoon/style.less";
export default {
    data(){
        return{
             // 用户对象，此对象目前是空的，需要在服务端把数据取出来
            user: {
                loginName: null,
                name: null,
                email: null,
                mobilePhone: null
            }
        };
    },
    mounted(){
        Axios.get("/api/user-center/user-info")
        // 访问成功的时候调用
        .then(response => {
            // 这里的this表示当前组件本身
            // this.user表示的就是data函数里面返回的对象中的user属性
            // response.data表示返回的实际数据
            this.user = response.data;
        })
        // // 访问失败的时候调用
        // .catch(function(error) {
        //     // 建议使用箭头函数，因为箭头函数不会自己绑定this关键字。
        //     // 在这个代码里面，如果使用箭头函数，那么this表示当前组件本身。
        //     // 如果使用function来接收返回值，this表示function对象本身。
        //     console.error(error);
        // });
    },
    methods: {
      save(){
        let data = this.user;
        Axios.post("/api/user-center/profile", data).then(response=>{
          alert("用户信息修改成功");
        });
      }
    }
};
  
</script>